<template>
  <div>
    <!-- 数据列表 -->
    <div class="box">
      <div class="lists">
        <div class="list">
          <div>
            <img
              class="list-img"
              src="../../../assets/images/查询数据列表.png"
              alt=""
            />
          </div>
          <div>
            数据列表
          </div>
        </div>
        <div style="margin-right: 10px;">
          <el-button type="primary" @click="addReservoir"
            >添加默认水库</el-button
          >
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table border :data="listData" style="width: 100%" align="center">
          <el-table-column
            prop="randomSort"
            label="默认顺序"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="水库名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fishPartyTotalNum"
            label="水库智能渔方总数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fishPartyStockNum"
            label="水库智能渔方数量"
            align="center"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <div class="slot" @click="indexMethod(scope.$index)">
                <el-button
                  v-if="!scope.$index == 0"
                  type="primary"
                  size="small"
                  @click="jurisdictionSet(scope.row.id, scope.row.randomSort)"
                  >上移
                </el-button>
                <el-button
                  v-if="scope.$index + 1 !== listData.length"
                  type="primary"
                  size="small"
                  @click="editClick(scope.row.id, scope.row.randomSort)"
                  >下移</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="remove(scope.row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog
        title="添加默认水库"
        :visible.sync="basicShow"
        width="20%"
        @close="openClick"
      >
        <el-form :model="form">
          <el-form-item label="选择水库 : ">
            <el-select v-model="reservoirInfo" style="width: 240px; ;">
              <el-option
                v-for="item in options"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认排序 : ">
            <el-input
              style="width: 240px; "
              v-model="sort"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="basicShow = false">取 消</el-button>
          <el-button type="primary" @click="basicShowOpen">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import CommonTable from "@/components/Table/index.vue";
import {
  randomPage,
  moveRandomSort,
  addRandomPage,
  reservoir,
  removeRandomPage
} from "@/api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      listData: [], //默认水库信息
      options: [], //水库信息
      reservoirInfo: "", // 选中水库的id
      sort: "", //水库顺序
      basicShow: false //弹出框显示隐藏控制
    };
  },
  created() {
    this.randomPage();
    this.indexMethod();
    this.reservoirList();
  },
  methods: {
    // 清除默认值
    openClick(){
      this.reservoirInfo=''
      this.sort=''
    },
    // 确认添加按钮
    async basicShowOpen() {
      let data = {
        randomSort: this.sort,
        reservoirId: this.reservoirInfo
      };
      let result = await addRandomPage(data);
      if (result.code == 0) {
        this.basicShow = false;
        this.randomPage();
        Toast.success("添加默认水库成功");
      } else {
        Toast.fail("添加失败,请稍后再试");
      }
    },
    // 添加按钮
    addReservoir() {
      this.basicShow = true;
    },
    // 水库列表
    async reservoirList() {
      let data = {
        enableStatus: -1,
        limit: -1,
        page: 1
      };
      let result = await reservoir(data);
      if (result.code == 0) {
        let lintInfo = result.data.records;
        lintInfo.forEach(item => {
          this.options.push({ name: item.name, code: item.id });
        });
      }
    },
    //   默认水库分页
    async randomPage() {
      let result = await randomPage();
      console.log(result);
      if (result.code == 0) {
        this.listData = result.data.records;
      }
    },

    indexMethod(index) {
      console.log("index", index);
    },
    // 上移
    async jurisdictionSet(e, index) {
      let data = [
        {
          randomSort: index,
          reservoirId: e
        }
      ];

      let result = await moveRandomSort(data);
      if (result.code == 0) {
        this.randomPage();
      }
      console.log("上", result);
    },
    // 下移
    async editClick(e, index) {
      let data = [
        {
          randomSort: index,
          reservoirId: e
        }
      ];

      let result = await moveRandomSort(data);
      if (result.code == 0) {
        this.randomPage();
      }
      console.log("下", e, result);
    },
    remove(e) {
      this.$confirm('此操作删除默认水库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async () => {
          let data = {
            reservoirId:e
          }
          let result = await removeRandomPage(data)
          if(result.code==0){
            this.randomPage()
            this.$message({
            type: 'success',
            message: '删除成功!'
          }); 
          }
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 时间选择
    timeChange(e) {
      if (e) {
        this.orderBeginDate = e[0];
        this.orderEndDate = e[1];
      } else {
        this.orderBeginDate = "";
        this.orderEndDate = "";
      }
      this.loginRecordPage(this.pageSize, this.currentPage);
    },

    // 跳转到添加水库页面
    addEvent() {
      // this.$router.push('addReservoir')
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  margin-left: 15%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
}
.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}
::v-deep .el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .search[data-v-1c1a5e1d] {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 80px;
  margin: 0 20px;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  z-index: 0;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
  width: 100px;
}

::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

.lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  // display: flex;
  align-items: center;
  // height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
</style>
